<template>
	<view>
		<!-- 
		注意：这是 H5、微信小程序界面，请勿和 new_index.nvue、index.nvue 混用
		1. new_index.nvue、index.nvue这两个是App页面
		 
		2. 另外：data.js 是上一版本留下的假数据，这一版改成了 URL 请求了（如不需要可以删除，也可作为后端请求参考）
		 
		3. 请各位大神多多留手，我已经把请求内存开到最大了
		 
		4. 视频 id 切记是字符串类型 
		 -->
		<!-- #ifdef MP -->
		<swiper :style="'width: '+ windowWidth +'px; height: '+ windowHeight +'px; background-color: #000000;'"
			:vertical="true" @animationfinish="animationfinish" @change="change" :current="current" :indicator-dots="false"
			@touchstart="mpTouchstart" @touchend="mpTouchend">
			<swiper-item v-for="(item,index) in dataList" :key="index">
				<view v-if="Math.abs(k-index)<=1" :style="'width: '+ windowWidth +'px; height: '+ windowHeight +'px;'"
					@click="tapVideoHover(item)" style="margin-top: 34rpx;">
					<view>
						<!-- 
						1.v-if：用于控制视频在节点的渲染数
						2.muted的默认值是 false，代表默认是禁音视频的
						3.http-cache默认开启视频缓存
						4.poster（封面（方案一））：这里的封面默认处理存储在阿里云的视频
						5.show-loading：这里默认去掉播放转圈的标志
						v-if="Math.abs(k-index)<=1"
						 -->
						<!-- <video
						v-if="isShow"
						:id="list._id+''+index"
						:loop="true"
						:muted="list.isplay"
						:controls="false"
						:http-cache="true"
						:page-gesture="false"
						:show-fullscreen-btn="false"
						:show-loading="false"
						:show-center-play-btn="false"
						:enable-progress-gesture="false"
						:src="list.src"
						@ended="ended"
						@click="tapVideoHover(list.state,$event)"
						:style="'width: '+ windowWidth +'px; height: '+ windowHeight +'px; background-color: #000000; z-index: -1;'"
						:poster="list.src+'?x-oss-process=video/snapshot,t_100,f_jpg'"
						></video> -->
						<video v-if="answerArr[preAnswer] && answerArr[preAnswer].videoUrl && isShow" :id="item.id+''+preAnswer"
							:style="{'width':windowWidth+'px','height':windowHeight+'px'}" loop
							:ref="`video_${k}_${answerArr[preAnswer].id}`" :autoplay="index==k" :src="answerArr[preAnswer].videoUrl"
							:object-fit="object_fit" :controls="false" :http-cache="true" :show-loading="true"
							:show-center-play-btn="false" :enable-progress-gesture="false">
						</video>
						<!-- <free-audio audioId='audio1' :url='answerArr[preAnswer].audioUrl'></free-audio> -->
						<!-- 播放状态：pause 的时候就会暂停 -->
						<view class="videoHover" v-if="(answerArr.length>0 && pauseV && answerArr[preAnswer].videoUrl)">
							<image class="playState" src="@/static/image/icons/videoPlay.png"></image>
						</view>
					</view>
					<view class="infoMain" v-if="dataList.length>0">
						<view class="quesInfo">
							<!-- 标签 -->
							<view class="tags" :style="{'width':windowWidth+'px'}">
								<text class="bold font16 tag" v-for="(item2,i) in item.objectNames"
									@click.stop="toTagHot(i)">{{item2}}</text>
								<!-- <text class="bold font16 tag">经济</text> -->
							</view>
							<view class="moduleWhite" :style="{'width':windowWidth+'px'}">
								<!-- 悬赏价格 -->
								<view class="font16 flex justConBetween infoSelf">
									<view class="flex">
										<text class="name bold">@{{item.createUserName||'匿名用户'}}</text>
										<text class="price colorRed bold" v-if="item.bounty"
											style="margin-left: 5rpx;">￥{{item.bounty}}</text>
									</view>
									<text class="focus font12" @click.stop="focusClick('creater')"
										v-if="!item.questionMoreHotStateField.isLikedUser && myUserId!=item.createUserId">{{item.questionMoreHotStateField.isLikedUser?'已关注':'+关注'}}</text>
								</view>
								<view class="title flex" v-if="item.title">
									<text class="bold font14 titleCon" v-if="item.title.length<=20">{{item.title}}</text>
									<text class="bold font14 titleCon" v-if="item.title.length>20"
										:style="{'width':windowWidth-120+'px'}">{{item.title}}</text>
									<text class="font14 detail bold" @click.stop="toDetail" style="color: #FF9900;">查看详情</text>
								</view>
								<!-- 共xx回答 查看上一个下一个回答 -->
								<view :class="answerArr.length==0?'accountNum textCenter flex':'accountNum flex'"
									:style="{'width':windowWidth+'px'}">
									<view class="operImage" v-if="(answerArr.length>0)">
										<!-- <image  v-if="(answerArr.length>0)" src="@/static/image/icons/left.png"
											mode="widthFix" @click.stop="seeAnswer('pre')"></image> -->
											<uni-icons type="arrow-left" size="25" color="#fff" @click.stop="seeAnswer('pre')"></uni-icons>
									</view>
									<view class="flex">
										<text class="font14 bold normal">共</text>
										<text class="bold font14" style="color: #FF9900;margin-left: 5rpx;">{{item.answerTotal}}</text>
										<text class="font14 bold normal">人回答</text>
									</view>
									<view class="operImage" v-if="(answerArr.length>0)">
										<!-- <image v-if="(answerArr.length>0)" src="@/static/image/icons/right.png"
											mode="widthFix" @click.stop="seeAnswer('next')"></image> -->
											<uni-icons type="arrow-right" size="25" color="#fff" @click.stop="seeAnswer('next')"></uni-icons>
									</view>
								</view>
							</view>
							<!-- 音频 -->
							<view style="margin: 150rpx 30rpx 0;" v-if="answerArr[preAnswer] && answerArr[preAnswer].audioUrl">
								<freeAudio :url='answerArr[preAnswer].audioUrl'></freeAudio>
							</view>
							<!-- 最佳回答 -->
							<view class="bestBox" v-if="item.bestAnswerId>-1">
								<view class="best noWidthBtn flex alignCenter">
									<image class="eye" src="@/static/image/icons/eye.png" mode=""></image>
									<text class="font14 bestTxt">查看最佳回答</text>
								</view>
							</view>
							<!-- 回答区域 -->
							<view class="answerBox" :style="{'height':windowHeight-350+'px','overflow':'hidden'}">
								<view class="" v-if="(answerArr.length>0 && answerArr[preAnswer].content)"
									:style="{'width':windowWidth+'px','height':wHeight-300+'px','overflow':'hidden'}">
									<text class="con font16" v-if="answerArr[preAnswer].content"
										:style="{'width':windowWidth+'px'}">{{answerArr[preAnswer].content}}</text>
									<view class="imgBox" v-if="answerArr[preAnswer].imgUrl">
										<uni-imgbox :canDel="false" :imgArr="answerArr[preAnswer].imgUrl.split(',')"></uni-imgbox>
									</view>
									<text class="answerMore font14 colorRed" @click.stop="seeTotal">查看完整》</text>
								</view>
								<view class="noAnswer" v-if="answerArr.length==0">
									<view class="noTip font14">该提问暂时还没有更多的回答哦，快来抢沙发~</view>
									<view class="answerBtn" @click.stop="toAnswer"><text class="font14 answerBtnText">去回答</text></view>
								</view>

							</view>
						</view>
						<view class="waitAnswer flex alignCenter" @click="conlog">
							<text class="bold waitNum">{{item.questionMoreHotStateField.waitingTotal}}</text>
							<text class="font14 waitTxt">个待回答</text>
						</view>
						<!-- 侧边操作栏 -->
						<view class="rightBox">
							<view class="rightHeader" v-if="answerArr.length>0">
								<image class="avatar" :src="answerArr[preAnswer].createUserAvatar || 'https://image.alhelp.net/uploads/20231104/4d491857ac50d21ebbcb25ff5bc254f8.png'"
									@click.stop="toHomePage"></image>
								<text class="focus"
									v-if="!answerArr[preAnswer].answerMoreHotStateField.isLikedUser && myUserId!=answerArr[preAnswer].createUserId"
									@click.stop="focusClick('answer')">+</text>
								<!-- <text class="focus" v-if="item.isFocus" @click.stop="focus">√</text> -->
							</view>
							<!-- 有最佳答案并且回答列表为空时显示最佳答案的头像 -->
							<view class="rightHeader" v-if="(answerArr.length==0 && item.bestAnswerId>-1)">
								<image class="avatar" :src="item.bestUserAvatar  || 'https://image.alhelp.net/uploads/20231104/4d491857ac50d21ebbcb25ff5bc254f8.png'" @click.stop="toHomePage">
								</image>
								<text class="focus" v-if="!item.bestAnswerId.isLikedUser"
									@click.stop="focusClick('bestAnswer')">+</text>
								<!-- <text class="focus" v-if="item.isFocus" @click.stop="focus">√</text> -->
							</view>
							<!-- 查看答案 -->
							<view class="rightOper" @click="toDetail">
								<image src="../../../static/image/icons/yj.png" mode="" class="rightOperIcon"></image>
							</view>
							<!-- 收藏 -->
							<view class="rightOper">
								<image class="rightOperIcon"
									:src="item.questionMoreHotStateField.isCollection?'https://image.alhelp.net/uploads/20231104/39ffc5692e205ff0b376a0b9da9ca833.png':'https://image.alhelp.net/uploads/20231104/340eeb08e38fe3fa9f53bae593879eb4.png'"
									@click.stop="love"></image>
								<!-- <text class="font12 bold">12</text> -->
							</view>
							<!-- 不感兴趣 -->
							<view class="rightOper">
								<image class="rightOperIcon" src="https://image.alhelp.net/uploads/20231104/e4a7db1aeb4cb7fb26a66ff4a8dc70a0.png" @click.stop="dislikeClick"></image>
							</view>
							<!-- 分享 -->
							<button class="rightOper1" @click.stop="shareClick" type="default" open-type="share" style="padding: 0;">
								<uni-icons type="redo-filled" size="20"></uni-icons>
							</button>
							<!-- 回答 -->
							<view class="rightOper1">
								<image class="rightOperIcon" src="https://image.alhelp.net/uploads/20231104/a97a418bf14aa1f13d0f8eea433dc266.png" @click.stop="writeAnswer"></image>
								<!-- <text class="font12 bold">12</text> -->
							</view>
							<!-- 稍后回答 -->
							<!-- <view class="rightOper">
								<image class="rightOperIcon"
									:src="item.questionMoreHotStateField.isWaiting?'/static/image/hot/wait2.png':'/static/image/hot/wait.png'"
									@click.stop="waitToAnswer"></image>
							</view> -->
							<!-- 刷新 -->
							<view class="rightOper1">
								<image class="rightOperIcon" src="@/static/image/hot/zt.png" @click.stop="getInitData"></image>
								<!-- <text class="font12 bold">12</text> -->
							</view>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<!-- #endif -->
	</view>
</template>

<script>
	import freeAudio from './components/chengpeng-audio/free-audio.vue'
	// import userList from '../new_index/data.js'//这个是假数据
	let audo = uni.createInnerAudioContext()
	audo.loop = true
	import {
		hotMoreList,
		answerAboutHot,
		operAboutHot,
		dislikeHot
	} from "@/api/school.js"
	import {
		focusUser
	} from "@/api/index.js"
	import {
		payBeforeTip
	} from "@/utils/common.js"
	export default {
		data() {
			return {
				windowWidth: 0,
				windowHeight: 0,
				platform: "",
				model: "",
				deleteHeight: 0,
				dataList: [],
				k: 0,
				oldVideo: "",
				voice: "",
				timeout: "",
				current: 0,
				boxStyle: { //视频，图片封面样式🌟💗
					'height': 0,
					'width': 0,
				},

				videoID: "",
				isShow: false,

				showPlay: false, //转轮显示控制
				rotates: 0, //转轮旋转角度
				rotateTime: "", //转轮递归事件控制
				xrotats: "",

				mpcleartime: "",

				isClick: false,

				changeTimeout: "",
				mptime: 0,
				mpstartTime: 0,

				duration: 500,


				object_fit: 'contain',
				// 提问列表数据
				quesPage: 1,
				quesPageSize: 10,
				// 回答的列表请求数据
				page: 1,
				pageSize: 10,
				pageTotal: 0,
				answerArr: [],
				// 回答的下标
				preAnswer: 0,
				videoContxt: '',
				pauseV: false, //显示暂停icon
				shareStatus: false,
				// 防止短时间多次点击
				canNext: true,
				myUserId: '',
				audioAction: {
					method: 'pause'
				}
			}
		},
		components: {
			freeAudio
		},
		watch: {
			async k(k, old_k) {
				console.log(k, old_k)
				// #ifndef MP
				this.clearToTime();
				// #endif
				this.isShow = false
				// var p = k+1;
				this.getAnswer(this.dataList[k].id, 'init')
				console.log('预加载第' + (k + 1) + '个视频：' + this.dataList[k]._id + '' + k)
			}
		},
		onLoad() {
			this.myUserId = uni.getStorageSync('userId')
			this.platform = uni.getSystemInfoSync().platform
			this.windowWidth = uni.getSystemInfoSync().windowWidth
			this.windowHeight = uni.getSystemInfoSync().windowHeight
			this.boxStyle.width = this.windowWidth + 'px' //给宽度加px
			this.boxStyle.height = this.windowHeight - this.deleteHeight; //有 tabbar的 修改这里可以改变视频高度
			this.getInitData() //刚进入页面加载数据
			// #ifndef MP
			this.rotateX();
			wx.showShareMenu({
				withShareTicket: true,
				//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
				menus: ["shareAppMessage", "shareTimeline"]
			})
			// #endif

		},
		onShow() {
			console.log('回到前台');
			// if(this.dataList.length !== 0){
			// 	// #ifdef MP
			// 	this.dataList[this.k].state = 'play';
			// 	uni.createVideoContext(this.dataList[this.k]._id+''+this.k,this).play()
			// 	// #endif
			// 	// #ifdef H5
			// 	if(this.isClick){
			// 		this.dataList[this.k].state = 'play';
			// 		uni.createVideoContext(this.dataList[this.k]._id+''+this.k,this).play()
			// 		audo.play()
			// 	}
			// 	// #endif
			// }
		},
		//暂停所有音频（一般用于页面切换时停止正在播放的音频）
		onUnload() { //普通页面在 onUnload 生命周期中执行
			uni.$emit('stop')
		},
		onHide() {
			// // #ifdef MP
			// this.dataList[this.k].state = 'pause';
			// uni.createVideoContext(this.dataList[this.k]._id+''+this.k,this).pause()
			// // #endif
			// // #ifdef H5
			// if(this.isClick){
			// 	this.dataList[this.k].state = 'pause';
			// 	uni.createVideoContext(this.dataList[this.k]._id+''+this.k,this).pause()
			// 	audo.pause()
			// }
			// // #endif
			uni.$emit('stop')
			console.log('到后台');
		},
		// #ifndef MP
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '热点分享', //分享的名称
				path: '/pages/school/hotScreen/hotScreen',
				mpId: 'wx458429e4a9197b53' //此处配置微信小程序的AppId
			}
		},
		//分享到朋友圈
		onShareTimeline(res) {
			return {
				title: '热点分享',
				type: 0,
				summary: "",
			}
		},
		// #endif
		methods: {
			conlog() {
				console.log(this.answerArr, '11111')
			},
			mpTouchend() {
				this.mptime = (new Date() / 1000) - this.mpstartTime;
			},
			mpTouchstart() {
				this.mpstartTime = (new Date() / 1000);
			},
			dealVoice() {
				uni.showToast({
					title: '处理声音',
					icon: 'none'
				})
			},
			clearToTime() {
				//清理定时器
				for (let i = 0; i < 20; i++) {
					clearTimeout(this.rotateTime);
					clearTimeout(this.xrotats);
					this.showPlay = false;
					this.rotates = 0;
				}
			},
			clearTime() {
				//清理定时器
				for (let i = 0; i < 20; i++) {
					clearTimeout(this.rotateTime);
					clearTimeout(this.xrotats);
				}
			},
			rotateX() {
				// clearTimeout(this.rotateTime);
				this.rotateTime = setTimeout(() => {
					this.rotateX();
					this.showPlay = true;
					this.rotates += 1;
				}, 30)
			},
			closeScrollview() {
				// 点击评论里面的叉叉，就会关闭评论
				this.$refs.pinglun.close();
			},
			ended() {
				// 1.播放当前视频结束时触发，自动切换下一个视频
				// this.current = this.k+1
			},
			//点击播放&&暂停
			tapVideoHover(item) {
				this.videoContxt = uni.createVideoContext(this.dataList[this.k].id + '' + this.preAnswer, this)
				this.pauseV = !this.pauseV
				console.log('视频的点击事件', this.pauseV, this.$refs)
				if (this.pauseV) {
					this.videoContxt.pause()
					this.pauseV = true
					return
				} else {
					this.videoContxt.play()
					this.pauseV = false
				}
			},
			change(event) {
				this.k = event.detail.current
			},
			animationfinish(event) {
				// 1.这里进行判断，如果是最后一个视频就进入 get() 方法加载视频进入列表
				if (this.k == this.dataList.length - 1) {
					this.getData()
				}
			},
			// 圈子热点
			toTagHot(idx) {
				this.canNext = false
				if (this.canNext) return
				// uni.navigateTo({
				// 	url: '/pages/school/hotScreen/hotCircleScreen?objectId=' + this.dataList[this.k].objectIds[idx],
				// })
				this.canNext = true
			},
			// 提问请求下一页数据
			getData() {
				// 这里就是数据加载完以后再向后端发送数据的地方
				console.error("请求下一页")
				this.quesPage++
				this.getInitData()
			},
			// 视频的暂停和播放
			clickVideo() {
				this.videoContxt = uni.createVideoContext(this.dataList[this.k].id, this)
				this.pauseV = !this.pauseV
				console.log('视频的点击事件', this.pauseV, this.$refs)
				if (this.pauseV) {
					this.videoContxt.pause()
					this.pauseV = true
					return
				} else {
					this.videoContxt.play()
					this.pauseV = false
				}
			},
			// 视频自带的暂停触发事件
			pause() {
				this.pauseV = true
			},
			// 提问详情
			toDetail() {
				uni.navigateTo({
					url: `/pages/send/question/questionDetail/questionDetail?item=${JSON.stringify(this.dataList[this.k])}`
				})
			},
			// 查看最佳答案
			toBestAnswer() {
				//支付一元查看，提问和最佳回答各分一半
				let param = {
					id: this.dataList[this.k].bestAnswerId,
					isBestBuy: this.dataList[this.k].isBestBuy,
					quesTitle: this.dataList[this.k].title
				}
				payBeforeTip(param)
			},
			// 去回答
			toAnswer() {
				let query = {
					id: this.dataList[this.k].typeId || this.dataList[this.k].id,
					title: this.dataList[this.k].title
				}
				uni.navigateTo({
					url: '/pages/send/answer/answer?query=' + JSON.stringify(query)
				})
			},
			// 去个人主页
			toHomePage() {
				uni.navigateTo({
					url: '/pages/mine/homePage/homePage'
				})
			},
			// 关注
			focusClick(user) {
				let param = {}
				if (user == 'creater') {
					if (this.dataList[this.k].createUserId == uni.getStorageSync('userId')) {
						uni.showToast({
							title: '亲，这是你自己哦',
							icon: 'none'
						})
						return
					}
					param = {
						isAdd: !this.dataList[this.k].questionMoreHotStateField.isLikedUser,
						fansUserId: this.dataList[this.k].createUserId,
						fansUserName: this.dataList[this.k].createUserName,
						fansUserAvatar: this.dataList[this.k].createUserAvatar,
					}
				} else if (user == 'answer') {
					if (this.answerArr[this.preAnswer].createUserId == uni.getStorageSync('userId')) {
						uni.showToast({
							title: '亲，这是你自己哦',
							icon: 'none'
						})
						return
					}
					param = {
						isAdd: !this.answerArr[this.preAnswer].answerMoreHotStateField.isLikedUser,
						fansUserId: this.answerArr[this.preAnswer].createUserId,
						fansUserName: this.answerArr[this.preAnswer].createUserName,
						fansUserAvatar: this.answerArr[this.preAnswer].createUserAvatar,
					}
					console.log("关注回答者", param)
				}
				focusUser(param).then((res) => {
					if (res.code == 100000) {
						if (user == 'creater') {
							this.dataList[this.k].questionMoreHotStateField.isLikedUser = !this.dataList[this.k]
								.questionMoreHotStateField.isLikedUser
						} else if (user == 'answer') {
							// TO DO 回答者的关注让他在进入到主页去取消
							this.answerArr[this.preAnswer].answerMoreHotStateField.isLikedUser = !this.answerArr[this.preAnswer]
								.answerMoreHotStateField.isLikedUser
						}
					}
				})

			},
			// 查看答案
			seeAnswer(oper) {
				console.log('查看答案', oper, this.preAnswer == this.answerArr.length - 1)
				this.pauseV = false
				this.showVideo = false
				if (oper == 'pre') {
					this.preAnswer--
					console.log('切换回答', oper, this.preAnswer)
					if (this.preAnswer < 0) {
						uni.showToast({
							title: '这已经是第一条回答了哦~',
							icon: 'none'
						})
						this.preAnswer = 0
					}
				} else if (oper == 'next') {
					if (this.preAnswer == this.answerArr.length - 1) {
						if (this.page < this.pageTotal) {
							this.page++
							this.getAnswer(this.dataList[this.k].id)
						} else {
							console.log('切换回答2', oper, this.answerArr.length, this.preAnswer)
							uni.showToast({
								title: '这已经是最后一条回答了哦~',
								icon: 'none'
							})
						}

					} else {
						this.preAnswer++
						console.log('切换回答3', oper, this.answerArr[this.preAnswer])
					}
				}
				this.showVideo = true
			},
			//收藏
			love() {
				this.colAndWaitOper(!this.dataList[this.k].questionMoreHotStateField.isCollection, this.dataList[this.k].id, 1)
				this.$emit('swiperStar', this.dataList[this.k])
			},
			// 不感兴趣
			dislikeClick() {
				uni.showModal({
					title: '提示',
					content: '确定将该提问设置为不感兴趣吗？一旦设置，该问题以后将不再推荐给您',
					success: (res) => {
						if (res.confirm) {
							dislikeHot({
								questionId: this.dataList[this.k].id
							}).then((res) => {
								if (res.code == 100000) {
									console.log('不感兴趣', res)
									// this.preAnswer=0
									// this.dSwiperItem.canShow=false
									// this.$emit("dislikeSucc",{id:this.dSwiperItem.id,current:this.swiperCurrent})
								}
							})
						} else if (res.cancel) {}
					}
				});

			},
			// 写答案
			writeAnswer() {
				this.toAnswer()
			},
			// 分享
			shareClick() {
				this.shareStatus = true
			},
			// 稍后回答
			waitToAnswer() {
				this.colAndWaitOper(!this.dataList[this.k].questionMoreHotStateField.isWaiting, this.dataList[this.k].id, -2)
			},
			shareHide() {
				this.shareStatus = false
			},
			// 收藏、稍后回答api
			colAndWaitOper(status, id, type) {
				let param = {
					isAdd: status,
					modelId: id,
					modelType: type, //1提问 2回答 -2待回答
				}
				operAboutHot(param).then((res) => {
					if (res.code == 100000) {
						if (type == 1) {
							this.dataList[this.k].questionMoreHotStateField.isCollection = status
						} else if (type == -2) {
							if (status) {
								this.dataList[this.k].questionMoreHotStateField.waitingTotal++
							} else {
								this.dataList[this.k].questionMoreHotStateField.waitingTotal--
							}
							this.dataList[this.k].questionMoreHotStateField.isWaiting = status
						}
					}
				})
			},
			// 查看完整的回答内容
			seeTotal() {
				uni.navigateTo({
					url: `/pages/send/answer/answerDetail/answerDetail?id=${this.answerArr[this.preAnswer].id}&quesTitle=${this.dataList[this.k].title}`
				})
			},
			// 获取提问列表数据
			getInitData() {
				// 这个方法主要就是用来第一次进入视频播放时用来处理的
				let param = {
					page: this.quesPage,
					size: this.quesPageSize,
					objectId: '',
				}
				hotMoreList(param).then((res) => {
					console.log('res===', res)
					if (res.code == 100000) {
						if (res.data.rows.length == 0) {
							uni.showToast({
								title: '已经到底了哦',
								icon: 'none'
							})
							return
						}
						this.dataList = this.dataList.concat(res.data.rows)
						this.isShow = true;
						this.getAnswer(this.dataList[0].id, 'init')
					}
				})
			},
			// 获取回答列表
			getAnswer(id, type) {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				this.pauseV = true
				let param = {
					page: this.page,
					size: this.pageSize,
					questionId: id
				}
				console.log(id,'11')
				answerAboutHot(param).then((res) => {
					uni.hideLoading()
					if (res.code == 100000) {
						if (type == 'init') {
							this.preAnswer = 0
							this.answerArr = []
						}
						this.pauseV = false
						this.answerArr = this.answerArr.concat(res.data.rows)
						this.pageTotal = Math.ceil(res.total / this.pageSize)
						this.isShow = true
						console.error('回答====', res, id, this.answerArr)
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.container {
		background-color: #000000;
	}

	.item {
		/* width : 750rpx; */
		background-color: #000000;
		position: relative;
	}

	.videoHover {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		// flex: 1;
		// background-color: rgba(0,0,0,0.1);
		// justify-content: center;
		// align-items: center;

		/* border-style: dashed;
		border-color: #DD524D;
		border-width: 1px; */
	}

	.playState {
		width: 160rpx;
		height: 160rpx;
		opacity: 0.2;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
	}

	.infoMain {
		position: absolute;
		/* #ifdef MP-WEIXIN */
		padding: 80rpx 0 0;
		/* #endif */
		/* #ifdef H5 */
		top: 30rpx 0 0;
		/* #endif */
		top: 0;
		left: 0;
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	.userAvatar {
		border-radius: 500%;
		margin-bottom: 15px;
		border-style: solid;
		border-width: 2px;
		border-color: #ffffff;
	}

	.userAvatar {
		width: 100rpx;
		height: 100rpx;
	}

	.likeIco,
	.shareIco,
	.commentIco {
		width: 60rpx;
		height: 60rpx;
		margin-top: 15px;
	}

	.likeNum,
	.commentNum,
	.shareTex {
		color: #ffffff;
		font-size: 30rpx;
		text-align: center;
		margin: 5px;
	}

	.likeNumActive {
		color: red;
	}

	.quesInfo {
		.tags {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			flex-direction: row;
			// margin-bottom: 30rpx;
			padding: 30rpx;
			background: rgba(0, 0, 0, 0.8);
		}

		.tags .tag {
			color: #fff;
			margin: 0 20rpx 0 0;
		}

		.moduleWhite {
			background: rgba(255, 255, 255, .85);
			padding: 0 30rpx;
			box-sizing: border-box;
		}

		.infoSelf {
			padding: 20rpx 0 0;

			.focus {
				border-radius: 30rpx;
				padding: 8rpx 20rpx;
				background: #FF9900;
				color: #fff;
			}
		}

		.name {
			color: #000;
		}

		.title {
			margin-top: 30rpx;
		}

		.title .titleCon {
			color: #000;
		}

		.title .detail {
			margin-left: 10rpx;
			// background:#f25500;
			// border-radius: 8rpx;
			// color: #fff;
			// width: 300rpx;
			// text-align: center;
			// height: 50rpx;
			// line-height: 50rpx;
			// margin-top: 20rpx;
		}

		.accountNum {
			// text-align: center;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 20rpx 0 0 -30rpx;
			padding-bottom: 20rpx;

			.normal {
				color: #999;
			}

			.operImage {
				width: 60rpx;
				height: 60rpx;
				border-radius: 60rpx;
				background: rgba(0, 0, 0, 0.8);
				margin: 0 30rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				image{
					width: 50rpx;
					height: 50rpx;
				}
			}
		}

		.textCenter {
			text-align: center;
			flex-direction: column;

			.flex {
				margin: 0 0 10rpx;
			}
		}

	}

	.bestBox {
		padding: 30rpx 0 0;

		.best {
			background: $colorMain;
			margin: 0 auto;
			width: 300rpx;
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}

	.answerBox {
		margin-top: 30rpx;
		position: relative;

		.con {
			color: #fff;
			padding: 0 30rpx;
		}

		.richText {
			color: #fff;
			font-size: 32rpx;
		}

		.imgBox {
			padding: 0 30rpx;
			margin: 20rpx 0;
		}

		.answerMore {
			position: absolute;
			bottom: 0;
			left: 0;
			background: #fff;
			border-radius: 0 30rpx 30rpx 0;
			padding: 10rpx 20rpx;
		}

		.noAnswer {
			text-align: center;
			padding: 50rpx 0 0;

			.noTip {
				color: #fff;
			}

			.answerBtn {
				padding: 10rpx 0;
				width: 150rpx;
				box-sizing: border-box;
				text-align: center;
				margin: 50rpx auto;
				background: $colorMain;
				border-radius: 30rpx;
			}
		}
	}

	.waitAnswer {
		position: absolute;
		right: 0;
		/* #ifdef H5 */
		top: 0;
		/* #endif */
		/* #ifdef MP-WEIXIN */
		top: 250rpx;
		/* #endif */
		background: rgba(0, 0, 0, .4);
		z-index: 100;
		border-radius: 40rpx 0 0 40rpx;
		padding: 6rpx 10rpx 6rpx 20rpx;

		.waitNum {
			font-size: 40rpx;
			color: #FF9900;
		}

		.waitTxt {
			color: #fff;
		}
	}

	.rightBox {
		position: absolute;
		right: 20rpx;
		bottom: 100rpx;

		.rightHeader {
			margin-bottom: 40rpx;
			position: relative;

			.avatar {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
			}

			.focus {
				color: #fff;
				position: absolute;
				width: 50rpx;
				height: 50rpx;
				border-radius: 50rpx;
				text-align: center;
				line-height: 50rpx;
				left: 22rpx;
				bottom: -20rpx;
				background: #FF9900;
				// margin-left:10rpx;
				// margin-top: -25rpx;
			}
		}

		.rightOper {
			// width: 70rpx;
			// height: 70rpx;
			// background: #fff;
			border-radius: 50%;
			margin: 0 15rpx 30rpx;
			position: relative;
			display: flex;
			align-items: center;

			.font12 {
				color: #fff;
				text-align: center;
			}
		}

		.rightOper1 {
			width: 50rpx;
			height: 50rpx;
			background: #FF9900;
			border-radius: 10rpx;
			margin: 0 18rpx 30rpx;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 28rpx;
				height: 34rpx;
			}
		}

		.rightOperIcon {
			width: 60rpx;
			height: 60rpx;
			// margin: 10rpx;
		}

		.animateIcon {
			position: absolute;
			right: 0;
			top: 0;
			width: 30rpx;
			height: 30rpx;
			opacity: 0;
		}
	}
</style>